<template>
	<view class="uploadcase">
		<u-navbar
			class="navbar_top"
			back-text="取消"
			title="上传"
			:title-size="36"
			:border-bottom="false"
			:back-icon-size="0"
			back-icon-color="#000000"
			:back-text-style="{ color: '#787882', fontSize: '26rpx' }"
		>
			<view class="navbar-right u-m-r-24" slot="right" @click="doissue">
				<text
					:style="{
						color: title == '' ? '#787882' : '#FFDB28',
						fontWeight: title == '' ? 100 : 600
					}"
				>
					发布案例
				</text>
			</view>
		</u-navbar>

		<view class="toptitle">
			<u-dropdown :close-on-click-mask="true" ref="uDropdown" :height="70" activeColor="#292930" @open="openclass">
				<u-dropdown-item :title="classname" @change="drochange">
					<view class="slot-content">
						<view class="item-box">
							<view
								class="item"
								v-for="(item, index) in classlist"
								:key="index"
								:style="{
									backgroundColor: item.id == -1 ? '#d7fffe' : '#DFDFDF'
								}"
								:class="[item.active ? 'active' : '']"
								@tap="tagClick(index, item.id)"
							>
								{{ item.name }}
							</view>
							<view style="width: 152rpx;" v-if="classlist.lenght % 2 !== 0"></view>
							<view style="width: 152rpx;" v-if="classlist.lenght % 3 !== 0"></view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<view class="topipt">
				<u-input
					v-model="title"
					:clearable="false"
					type="text"
					:border="false"
					placeholder="输入案例标题"
					:custom-style="{
						fontSize: '36rpx'
					}"
				/>
			</view>
		</view>
		<view class="imgbox">
			<view class="imgul" v-if="imgList.length > 0">
				<block v-for="(v, k) in imgList" :key="k">
					<view class="item">
						<image :src="v"></image>
						<u-icon size="50" name="close-circle-fill" class="delicon" @click="dodel(k)"></u-icon>
					</view>
				</block>
			</view>
			<u-image v-else src="#" :width="704" :height="314"></u-image>
			<u-upload
				v-if="imgList.length < 5"
				class="uploadbtn"
				:action="action"
				:show-upload-list="false"
				:index="1"
				@on-error="uploaderr"
				@on-success="doupland"
				:max-count="5"
				:show-progress="false"
				:deletable="false"
				:max-size="5 * 1024 * 1024"
				:custom-btn="true"
				:limitType="['png', 'jpg', 'jpeg', 'webp']"
			>
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<u-icon name="plus" color="#101010" size="28"></u-icon>
					添加图片
				</view>
			</u-upload>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'uploadcase',
	data() {
		return {
			action: 'https://app.letuilm.com/api/upload', //file
			fileList: [
				// {
				// 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg'
				// }
			],
			title: '',
			classname: '分类',
			classlist: [],
			imgList: [],
			xuhao: ''
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.getclasslist();
	},
	//挂载开始之前被调用
	beforeMount() {},
	// onPullDownRefresh() {
	// 	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// 	console.log('refresh');
	// 	setTimeout(function() {
	// 		uni.stopPullDownRefresh(); //停止下拉刷新动画
	// 	}, 1000);
	// },
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		doaddcaseinfo(classid, title, content) {
			this.$u.api
				.doaddcaseinfo({
					class_id: classid,
					title: title,
					content: content
				})
				.then(res => {
					console.log(res);
					this.$refs.uToast.show({
						title: '发布成功!',
						type: 'success'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/case/case'
						});
					}, 300);
				})
				.catch(err => {
					console.log(err);
				});
		},
		tagClick(index, id) {
			// console.log(index, id);
			this.xuhao = parseInt(id);
			this.classlist[index].active = !this.classlist[index].active;
			for (let i in this.classlist) {
				if (i == index) {
					this.classlist[i].active = true;
					this.classname = this.classlist[i].name;
					this.closeDropdown();
				} else {
					this.classlist[i].active = false;
				}
			}
		},
		closeDropdown() {
			this.$refs.uDropdown.close();
		},
		openclass(index) {
			console.log(index);
			// this.current = 5;
		},
		getclasslist() {
			this.$u.api
				.getcaseclass()
				.then(res => {
					console.log(res);
					let arr = res.data;
					for (let i in arr) {
						arr[i].active = false;
					}
					this.classlist.push(...arr);
				})
				.catch(err => {
					console.log(err);
				});
		},
		dodel(index) {
			this.imgList.splice(index, 1);
		},
		doissue() {
			// console.log(this.xuhao);
			let str = '<div>';
			for (let i in this.imgList) {
				str += `<img src="` + this.imgList[i] + `" style="width:100%">`;
			}
			str += `</div>`;
			this.doaddcaseinfo(this.xuhao,this.title,str)
		},
		drochange() {
			console.log(this.classid);
			for (let i in this.options) {
				if (this.options[i].value == this.classid) {
					this.classname = this.options[i].label;
				}
			}
		},
		uploaderr(res, index, lists, name) {
			console.log('上传错误返回', res, index, lists, name);
		},
		doupland(data, index, lists, name) {
			console.log('上传成功返回', data, index, lists, name);
			if (data.code == 200) {
				let url = `//` + data.data.url;
				this.imgList.push(url);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.uploadcase {
	padding-bottom: 40rpx;
	.toptitle::v-deep {
		.u-dropdown {
			width: 200rpx;
		}
		.u-dropdown__content {
			height: calc(100% - 168rpx);
		}
		.topipt {
			width: 550rpx;
			float: right;
			margin-top: -70rpx;
			z-index: 970;
		}
	}
	.imgbox {
		padding: 0 24rpx;
		margin-top: 25rpx;
		.imgul {
			height: 100%;
			.item {
				position: relative;
				margin-bottom: 30rpx;
				.delicon {
					position: absolute;
					top: 0;
					right: 0;
					color: red;
				}
			}
		}
		.slot-btn {
			width: 704rpx;
			height: 66rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 25rpx;
			background: rgb(255, 255, 255);
			border-radius: 8rpx;
			border: 2rpx solid rgba(187, 187, 187, 100);
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
	}
	.slot-content {
		background-color: #ffffff;
		padding: 0 24rpx 24rpx 24rpx;

		.item-box {
			// margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 28rpx;

			.item {
				// border: 1px solid $u-type-primary;
				color: #787882;
				padding: 8rpx 20rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
				background-color: #dfdfdf;
			}

			.active {
				color: #292930;
				// background-color: $u-type-primary;
			}
		}
	}
}
</style>
